<link rel="stylesheet" href="{$Sys_JsLibsURL}/formcheck/theme/classic/formcheck.css" type="text/css" media="screen" />
	
	
<script type="text/javascript" src="{$Sys_JsLibsURL}/formcheck/lang/en.js"> </script>
<script type="text/javascript" src="{$Sys_JsLibsURL}/formcheck/formcheck.js"> </script>

{literal}
<script type="text/javascript">
window.addEvent('domready', function(){	
	new FormCheck('form', {
				submitByAjax: true,
				onAjaxSuccess: ajaxSuccess,
				onAjaxFailure: ajaxFailed,
				display : {
					errorsLocation : 1,
					indicateErrors : 2,			
					showErrors : 1		
				}
	});
});

function ajaxSuccess(response) {
	
	displaybox("success");

}

function ajaxFailed() {

	displaybox("error");
	
}

function displaybox(id) {

	$("formular").style.visibility = "hidden";
	$("formular").style.display = "none";
	
	$(id).style.visibility = "visible";
	$(id).style.display = "block";

}


</script>

<style>
#success {
	visibility: false;
	display: none;
	
	background-color: #88d280;
	border: 1px solid #094a00;
	padding: 4px;
	color: black;
	font-size: 13px;
}

#error {
	visibility: false;
	display: none;
	
	background-color: #d28880;
	border: 1px solid #4a0900;
	padding: 4px;
	color: black;
	font-size: 13px;
}

div.field {
	float: left;
	padding-right: 4px;
	padding-bottom: 6px;
	font-weight: bold;
}

div.field input[text] {
	width: 120px;
}

{/literal}
</style>
<div style="width: 80%;">
	<div id="success" >Thank you! You've successful subscribed to our Newsletter!</div>
	<div id="error" >Sorry, there was an error while saving your subscription</div>
	
	<form id="form" action="{$Sys_CurrentPageURL}&method=addSubscription" method="get">
		<div id="formular">
		
		<div class="field" style="width: 100%">
		Gender*:<br>
		<input type="radio" name="Newsletter_isMale" id="isMale1" value="0" class="validate['required']" style="width: auto; border: none;" ><label for="isMale1">Female</label></input>&nbsp;&nbsp;
		<input type="radio" name="Newsletter_isMale" id="isMale2" value="1" class="validate['required']" style="width: auto; border: none;" ><label for="isMale2">Male</label></input>
		</div>
		
		<div class="field">
		Firstname*:<br><input type="text" name="Newsletter_firstname" class="validate['required']" >
		</div>
		<div class="field">
		&nbsp;<br>&nbsp;
		</div>
		<div class="field">
		Lastname*:<br><input type="text" name="Newsletter_lastname" class="validate['required']" >
		</div>
	
		<div class="field" style="width: 100%">
		Your E-Mail Adress*:<br><input type="text" name="Newsletter_mailGeneral" class="validate['required','email']" style="width: 300px">
		</div>
		
		<div class="field">
		Phone:<br><input type="text" name="Newsletter_telHome" class="validate['phone']">
		</div>
		<div class="field">
		&nbsp;<br>&nbsp;
		</div>
		<div class="field">
		Mobile Phone:<br><input type="text" name="Newsletter_telMobile" class="validate['phone']">
		</div>
	
		<div class="field" style="width: 100%">
		Street:<br><input type="text" name="Newsletter_street" style="width: 300px">
		</div>
	
		<div class="field">
		ZIP:<br><input type="text" name="Newsletter_zip" style="width: 40px;" class="validate['number']">
		</div>
		
		<div class="field">
		City:<br><input type="text" name="Newsletter_city">
		</div>
		
		
		<div style="width: 300px; text-align: right;">
		<input type="submit" value="Subscribe" style="width: 120px;"></input>
		</div>
		
		</div>
	</form>
</div>